/**
* 功能描述：锚点组件样式表
* @author jin xiaohang
* @date 2022/10/8 13:43
* @version 1.0
*/

@import "src/style/mixins/index";


//定义布局
@mixin anchor-layout{
  box-sizing: border-box;
  margin: 0;
  line-height: 1.5715;
  list-style: none;
  position: relative;
  padding: 0 0 0 2px;

  //引导线布局
  .#{$namespace}-anchor-ink{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    &::before{
      position: relative;
      display: block;
      width: 2px;
      height: 100%;
      margin: 0 auto;
      background-color: #f0f0f0;
      content: " ";
    }

    //圆点布局
    .#{$namespace}-anchor-ink-ball{
      top: 10.5px;
      position: absolute;
      left: 50%;
      display: inline-block;
      width: 8px;
      height: 8px;
    }
  }

  //锚点项布局
  .#{$namespace}-anchor-link{
    padding: 7px 0 7px 16px;
    line-height: 1.143;

    //锚点项题目布局
    .#{$namespace}-anchor-link-title{
      position: relative;
      display: block;
      margin-bottom: 6px;
      overflow: hidden;
    }
  }
}

//定义样式
@include b(anchor){
  color: #000000d9;
  font-size: 14px;

  //引导线样式
  .#{$namespace}-anchor-ink{

    //圆点样式
    .#{$namespace}-anchor-ink-ball{
      background-color: #fff;
      border: 2px solid #1890ff;
      border-radius: 8px;
      transform: translate(-50%);
      transition: top .3s ease-in-out;
    }
  }

  //锚点项样式
  .#{$namespace}-anchor-link{

    //锚点项题目样式
    .#{$namespace}-anchor-link-title{
      color: #000000d9;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all .3s;
      &:only-child{
        margin-bottom: 0;
      }
      &:hover{
        cursor: pointer;
        color: #1890ff;
      }

    }
  }

  //激活锚点项
  .#{$namespace}-anchor-link-active{

    //激活样式
    .#{$namespace}-anchor-link-title-active{
      color: #1890ff;
    }
  }

  //引用布局
  @include anchor-layout;
}